<template>
  <div class="one-box">
    <div class="left">
      <Left
        class="animate__animated"
        :class="
          one.active2 == '1' ? 'animate__fadeInLeft' : 'animate__backOutLeft'
        "
      />
    </div>
    <div class="right">
      <Right
        class="animate__animated"
        :class="
          one.active2 == '1' ? 'animate__fadeInRight' : 'animate__backOutRight'
        "
      />
    </div>
    <div class="hezi">盒子三</div>
  </div>
</template>
<script setup>
import "animate.css"
import Left from "./components/Left.vue"
import Right from "./components/Right.vue"
import userStore from "../../store/index"
const { one } = userStore()
</script>
<style scoped lang="less">
.one-box {
  width: 1920px;
  height: 1080px;
  display: flex;
  box-sizing: border-box;
  .left {
    position: absolute;
    left: 0px;
    width: 300px;
    height: 500px;
  }
  .right {
    position: absolute;
    right: 0px;
    width: 300px;
    height: 500px;
  }
  .hezi {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
  }
}
</style>
